<template>
  <div class="news container-1200 flex flex-jc-sp">
    <div class="left">
      <div class="left-item" v-if="list">
        <h3 class="title flex flex-jc-sp flex-ai-c">
          <div class="flex flex-ai-c">
            <img
              style="margin-right: 12px"
              src="~@/assets/images/icon-book.png"
              alt=""
              srcset=""
            />
            热门资讯
          </div>
          <!-- <div style="font-size: 12px; color: #999999">更多>></div> -->
        </h3>
        <div class="container">
          <div
            v-for="(item, index) in list"
            :key="item.id"
            class="news-item flex cursor-p"
            @click="goNews(item.id)"
          >
            <div
              class="num"
              :style="`background-color: ${
                index < 3 ? '#0a68a2' : '#d5d5d7'
              };color: ${index < 3 ? '#fff' : '#999'};`"
            >
              {{ index + 1 }}
            </div>
            <div style="width: 100%; overflow: hidden">{{ item.title }}</div>
          </div>
        </div>
      </div>
      <div class="left-item">
        <h3 class="title flex flex-jc-sp flex-ai-c">
          <div class="flex flex-ai-c">
            <img
              style="margin-right: 12px"
              src="~@/assets/images/icon-book.png"
              alt=""
              srcset=""
            />
            热门写字楼
          </div>
          <router-link style="font-size: 12px; color: #999999" to="/offices"
            >更多>></router-link
          >
        </h3>
        <div class="container">
          <div
            class="build-item flex cursor-p"
            v-for="item in houseList"
            :key="item.id"
            @click="go(item.id)"
          >
            <img
              style="width: 114px; height: 84px; margin-right: 18px"
              :src="item.thumb"
              alt=""
              srcset=""
            />
            <div class="flex flex-fd-c flex-jc-sp">
              <div style="font-size: 14px; color: #333">
                <div style="margin-bottom: 5px">{{ item.title }}</div>
                <div>{{ item.price }}元/m²·月</div>
              </div>
              <div style="font-size: 12px; color: #999">
                <div style="margin-bottom: 5px">{{ item.address }}</div>
                <div>可租面积{{ item.area }}㎡</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="right">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
import { getApiBaseArticleList, getApiBaseHouseList } from '@/api'

export default {
  components: {},
  data() {
    return {
      list: null,
      houseList: null,
    }
  },
  created() {
    this.getArticleCateList()
    this.getHouseList()
  },
  methods: {
    goNews(id) {
      this.$router.push(`/news/detail/${id}`)
    },
    go(id) {
      this.$router.push(`/detail/${id}`)
    },
    getArticleCateList() {
      getApiBaseArticleList({
        page_size: this.page_size,
        page_number: this.page_number,
        is_top: 1,
      }).then((res) => {
        if (res.code === 200) {
          const data = res.data.list
          this.list = data
        }
      })
    },
    getHouseList() {
      const params = {
        page_number: 1,
        page_size: 10,
        cate_id: 1,
        is_top: 1,
      }
      const user_id = localStorage.getItem('id')
      params.user_id = user_id
      getApiBaseHouseList(params).then((res) => {
        if (res.code === 200) {
          this.houseList = res.data.list
        }
      })
    },
  },
}
</script>

<style lang="less" scoped>
.news {
  padding: 38px 0;
  .left {
    width: 340px;
    .left-item {
      border: 1px solid #e7e7e9;
      margin-bottom: 20px;
      .title {
        height: 44px;
        background-color: #e7e7e9;
        line-height: 44px;
        font-size: 18px;
        padding: 0 16px;
      }
      .container {
        padding: 18px;
        padding-bottom: 12px;
        .news-item {
          width: 100%;
          overflow: hidden;
          margin-bottom: 12px;
          .num {
            margin-right: 6px;
            width: 16px;
            height: 16px;
            text-align: center;
            line-height: 16px;
            border-radius: 3px;
            font-size: 12px;
          }
        }
        .build-item {
          margin-bottom: 14px;
        }
      }
    }
  }
  .right {
    width: 826px;
  }
}
</style>
